<template>
  <div>
    <h1>XXX管理系统</h1>
    <ul>
      <li v-for="ro in routes" :key="ro.name">
        <RouterLink :to="{ name: ro.name }">{{ ro.name }}</RouterLink>
        <!-- 第二层菜单 -->
        <template v-if="ro.children && ro.children.length !== 0">
          <ul>
            <li v-for=" cro in ro.children" :key="cro.name">
              <RouterLink :to="{ name: cro.name }">{{ cro.name }}</RouterLink>
            </li>
          </ul>
        </template>
      </li>
    </ul>

    <ul class="crumbs">
      <li v-for=" cr in crumbs" :key="cr.name">
        <RouterLink :to="{ name: cr.name }">{{ cr.name }}</RouterLink>
      </li>
    </ul>
    <RouterView></RouterView>
  </div>
</template>
<script>
export default {
  computed: {
    routes() {
      return this.$router.options.routes;
    },

    crumbs() {
      return this.$route.matched;
    }

  }
}

</script>

<style lang="scss">
.router-link-active {
  background-color: antiquewhite;
}

.crumbs {
  display: flex;
  margin: 0;
  padding: 0;
  flex-wrap: wrap;
  list-style: none;

  li {
    &::after {
      content: '>';
    }
  }

  li:last-child {
    &::after {
      content: none;
    }
  }
}
</style>